<template>
  <el-tag
    :type="computedType"
    :effect="effect"
    class="status-tag"
  >
    {{ text }}
  </el-tag>
</template>

<script>
import { computed } from 'vue'

export default {
  name: 'StatusTag',
  props: {
    status: {
      type: [String, Number, Boolean],
      required: true
    },
    type: {
      type: String,
      default: null
    },
    map: {
      type: Object,
      default: () => ({
        // 通用状态
        '启用': { type: 'success', text: '启用' },
        '禁用': { type: 'danger', text: '禁用' },
        '停用': { type: 'danger', text: '停用' },
        '正常': { type: 'success', text: '正常' },
        '异常': { type: 'danger', text: '异常' },
        '进行中': { type: 'warning', text: '进行中' },
        '已完成': { type: 'success', text: '已完成' },
        '待处理': { type: 'info', text: '待处理' },
        
        // 数字状态
        0: { type: 'danger', text: '停用' },
        1: { type: 'success', text: '启用' },
        
        // 布尔状态
        true: { type: 'success', text: '是' },
        false: { type: 'info', text: '否' }
      })
    },
    effect: {
      type: String,
      default: 'light'
    }
  },
  setup(props) {
    // 计算显示的文字
    const text = computed(() => {
      const statusStr = String(props.status)
      if (props.map[statusStr]) {
        return props.map[statusStr].text
      }
      return statusStr
    })
    
    // 计算标签类型
    const computedType = computed(() => {
      if (props.type) return props.type
      
      const statusStr = String(props.status)
      if (props.map[statusStr]) {
        return props.map[statusStr].type
      }
      
      // 默认类型
      return 'info'
    })
    
    return {
      text,
      computedType
    }
  }
}
</script>

<style scoped>
.status-tag {
  min-width: 70px;
  text-align: center;
  font-weight: 500;
  border-radius: 4px;
  transition: all 0.3s;
}
</style> 